<template>
  <div class="wraper">
    <swiper :options="swiperOption" ref="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item in swiperImageList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt />
      </swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "homeSwiper",
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
          //stopOnLastSlide: false
        },
        loop: true
      },
      swiperImageList: [
        {
          id: "0001",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20198/06e65ace8dce3638e847b04e975489d1.jpg_750x200_a2dcb0a4.jpg"
        },
        {
          id: "0002",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20199/3ff47fa622d07edad492c2859a5ad32f.jpg_750x200_3df30168.jpg"
        },
        {
          id: "0003",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20199/8e63e03094c8a1a51d0e42b2bf9ecb1e.jpg_750x200_e8a79340.jpg"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.wraper >>> .swiper-pagination-bullet-active {
  background-color: #fff;
}

.wraper {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 28.57%;

  .swiper-img {
    width: 100%;
  }
}
</style>